<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ include file="/page/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@ include file="/adapter/adapter-bootstrap.jsp" %>
<title>APP日交易量分析</title>
<script src="${ctx}/js/esl/esl.js"></script>
<script type="text/javascript">
function  goBack(){
	window.history.back(-1);
}

function init(){
	  
}

  
</script>
</head>
<body  onload="init()">
<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
      APP日交易量分析
      </h3>
   </div>
   <div class="panel-body" style="text-align: center;">
		<div id="line"style="height:400px;margin:0 auto;text-align: center;"></div>
		<div id="detail" style="height:100px;border:2px solid yellow;text-align: left;">
			<span style="font-family: 华文行楷;font-size: 18px;margin: 10px;">最近10天用户访问量明细：</span><br/>
			<span style="margin-left: 10px;">${detail}</span>
			<!-- <span style="margin-left: 10px;">北京：947，天津：735，上海：714，重庆：681，河北：475，河南：369，云南：322，辽宁：252，黑龙江：241，湖南：128。</span> -->
		</div>
		<script type="text/javascript">
		var fileLocation ='${ctx}/js/echarts';
		require.config({
		    paths:{ 
		          'echarts': fileLocation,
		          'echarts/chart/line': fileLocation,
		          'echarts/chart/bar': fileLocation,
		          'echarts/chart/pie': fileLocation
		    }
		});
		// 作为入口
		require(
		    [
		        'echarts',
		        'echarts/chart/line'
		    ], 
			displayChart
		);

		function displayChart(ec) {
		         //折线图
		        var lineChart = ec.init(document.getElementById('line'));
				var lineChartOtion = getLineChartOption();	
		        lineChart.setOption(lineChartOtion);
		    }

			//获得Line图的选项和数据
			function getLineChartOption(){
				/* var timeData = [
				                '2009/6/12',
				                '2009/6/13',
				                '2009/6/14',
				                '2009/6/15',
				                '2009/6/16',
				                '2009/6/17',
				                '2009/6/18',
				                '2009/6/19',
				                '2009/6/20',
				                '2009/6/21',
				                '2009/6/22',
				                '2009/6/23',
				                '2009/6/24',
				                '2009/6/25',
				                '2009/6/26',
				                '2009/6/27',
				                '2009/6/28',
				                '2009/6/29',
				                '2010/6/30'
				            ]; */
				            var timeData = [<%=request.getAttribute("dates")%>];

				            timeData = timeData.map(function (str) {
				                return str.substring(str.indexOf("/")+1);
				            });
				var lineChartOption={
					    title : {
					        text: '用户日访问量',
					        //subtext: '用户每天访问次数',
					        x: 'center'
					    },
					    //提示框，折线图的触发
					    tooltip : {
					        trigger: 'axis'
					    },
					    //工具栏组件
					    toolbox: {
					        show : true,
					        feature : {
					            mark : true,
					            dataView : {readOnly: false},
					            magicType:['line', 'bar'],
					            restore : true,
					            saveAsImage : true
					        }
					    },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'category',
					            boundaryGap : false,
					            //axisLine: {onZero: true},
					            data: timeData
					        }
					    ],
					    yAxis : [
					        {
					            /* type : 'value',
					            axisLabel : {
					                formatter: '{value} 次'
					            }, */
					            name : '访问量/次',
					            type : 'value',
					            max : <%=request.getAttribute("maxCount")%>,
					            min : 0
					        }
					    ],
					    //系列列表。每个系列通过 type 决定自己的图表类型
					    series : [
					        {
					            name:'访问量',
					            type:'line',
					            symbolSize: 2,
					            itemStyle: {
					                normal: {
					                    lineStyle: {
					                        shadowColor : 'rgba(0,0,0,0.4)'
					                    }
					                }
					            },
					            /* data:[97,196,296,195,95,20,496,796,195,25,296,195,95,20,496,796,195,25,543] */
					            data:[<%=request.getAttribute("numbers")%>]
					        }
					    ]
					};
		return lineChartOption;
		}
    </script>
   </div>
</div>

<%@ include file="/page/foot.html" %>
